<template>
	<div class="body">
		<div class='main'>

			<div class="bannerImage">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffuke.fenghuangfc.com%2Fuploads%2Fallimg%2F160714%2F1-160G4151Z4125.png&refer=http%3A%2F%2Ffuke.fenghuangfc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633004476&t=029556dec685d303326ef4de0882fdc3"
					alt="">
			</div>
			<count-down style="position: relative; top: -50rpx;" :is-day="true" :tip-text="'倒计时 '" :day-text="' 天 '"
				:hour-text="' 时 '" :minute-text="' 分 '" :second-text="' 秒'" :datatime="endtime">
			</count-down>
			<div class="goodsList">
				<div class="goods">
					<div class="goods-lift">
						<image class="image" :src="sku.sku_image" alt=""></image>
					</div>
					<div class="goods-right">
						<div class="goods-title">{{sku.goods_name}}</div>
						<div class="goods-price">原价：{{bargainDetail.price}}</div>
						<div class="goods-bargain-price">
							<text>已砍至：</text>￥{{bargainDetail.cutDownPrice}}
						</div>
					</div>
				</div>
				<div class="goods-bargain-progress">
					<el-progress :percentage="percentage" :format="format"></el-progress>
					<div class="goods-bargain-price-status">
						<div>已砍{{bargainPrice.cutPrice}}元</div>
						<div>还剩{{bargainPrice.surplusPrice}}元</div>
					</div>
				</div>
				<div class="goods-bargain-button" v-if="from.spread_code">
					<button v-if="helpStatus['code'] == 200" class="bargain-button" style="background-color: #FEF363;color: #EB5D19;"
						@click="toBargainRecode()">帮好友砍一刀</button>
					<button v-else-if="helpStatus['code'] == 400" class="bargain-button"
						@click="toOtherBargain()">我也要免费拿</button>
					<div class="bargain-help-count">已有{{helpList.total}}位好友成功帮ta砍价</div>
				</div>
				<div class="goods-bargain-button" v-else>
					<button v-if="status['code'] == 200" class="bargain-button"
						@click="toBargainRecode()">{{status['message']}}</button>
					<button v-else-if="status['code'] == 1001" class="bargain-button"
						@click="invitePeople()">{{status['message']}}</button>
					<button v-else-if="status['code'] == 1002" class="bargain-button"
						@click="toPay()">{{status['message']}}</button>
					<button v-else class="bargain-button" @click="toOtherBargain()">{{status['message']}}</button>
					<div class="bargain-help-count">已有{{helpList.total}}位好友成功帮您砍价</div>
				</div>
				<div class="goods-bargain">
					<div class="goods-bargain-help">
						<image src="../../static/img/left.png" mode=""></image>
						<div class="goods-bargain-title">砍价帮</div>
						<image src="../../static/img/right.png" mode=""></image>
					</div>
					<ul class="infinite-list goods-bargain-help-list" v-if="helpList.total>0" v-infinite-scroll="load()"
						style="overflow:auto">
						<div class="goods-bargain-help-people infinite-list-item" v-for="(item,index) in helpList.data">
							<div class="left">
								<image :src="item.avatar" mode=""></image>
								<div class="text">
									<div class="nickname">{{item.nickname}}</div>
									<div class="date">{{item.create_time}}</div>
								</div>
							</div>
							<div class="right">
								<div class="bargain-price">砍掉{{item.price}}元</div>
							</div>
						</div>
					</ul>

					<div v-else class="goods-bargain-help-none">
						暂无好友帮砍
					</div>
				</div>
				<div class="goods-bargain">
					<div class="goods-bargain-help">
						<image src="../../static/img/left.png" mode=""></image>
						<div class="goods-bargain-title">商品详情</div>
						<image src="../../static/img/right.png" mode=""></image>
					</div>
					<div class="goods-bargain-help-people">
						<view class="content" v-html="web_content"></view>
					</div>
				</div>
			</div>
			<div id="spread_code" style="font-size: 36rpx;">
				<el-result title="好友扫描二维码或者输入下方邀请码"> 
				<template slot="icon">
				    <el-image :src="spread_qrcode"></el-image>
				  </template>
				   <template slot="extra">
					   <div class="user-spread-code">{{spread_code}}</div>
				    </template>
				</el-result>
			</div>
		</div>
	</div>
</template>
<script>
	import CountDown from '../../components/countDown/index.vue';
	import Loading from '../../components/Loading/Loading.vue';
	export default {
		components: {
			CountDown,
			Loading
		},
		props: {},
		data: function() {
			return {
				sku: [], //砍价sku商品
				bargainDetail: [], //砍价活动详情
				status: [], //用户参与状态
				page: 1, //页码
				limit: 10, //数量
				id: 0, //砍价活动id
				endtime: 0, //结束时间
				percentage: 0, //进度条
				web_content: '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
				bargainPrice: {}, //【已砍金额，待砍金额】
				helpList: {
					'total': 0,
					'data': []
				}, //好友帮砍列表
				bargain_id: 0, //拥有者砍价活动参与记录id
				spread_code: '',//邀请码
				spread_qrcode: '',//邀请二维码
				from: {},
				helpStatus: {}, //受邀用户砍价状态
			};
		},
		onLoad(options) {
			this.id = options.id
			this.from.spread_code = options.spread_code
		},
		onShow() {
			if(this.from.spread_code){
				this.getBargainUser();
			}else {
				this.getBargainDetail();
				this.bargainUserStatus();
			}
		},
		mounted: function() {

		},

		methods: {
			//获取砍价活动详情
			getBargainDetail() {
				this.$http.get('bargain/getBargainDetail', {
					id: this.id,
					bargain_user_id: this.from.bargain_user_id
				}).then((res) => {
					var data = res.data.data
					this.bargainDetail = data
					this.sku = data.goodsSku
					this.endtime = data.end_time
					this.bargainDetail.cutDownPrice = this.bargainDetail.price
					this.bargainPrice = {
						'cutPrice': 0,
						'surplusPrice': data.price - data.bargain_price
					}
				})
			},
			//获取用户砍价状态
			bargainUserStatus() {
				this.$http.get('bargain/bargainUserStatus', {
					id: this.id,
					bargain_user_id: this.from.bargain_user_id
				}).then((res) => {
					this.status = res.data
					let data = res.data.data;
					console.log(data);
					if (JSON.stringify(data) !== '{}' && data.length == undefined) {
						this.endtime = data.end_time
						this.percentage = data.percentage
						this.bargain_id = data.id;
						this.spread_code = data.spread_code
						this.spread_qrcode = data.spread_qrcode
						this.getBargainHelpPeople();
						this.bargainDetail.cutDownPrice = (this.bargainDetail.price - data.cutPrice).toFixed(2)
						this.bargainPrice = {
							'cutPrice': data.cutPrice,
							'surplusPrice': data.price
						}
					}
				})
			},
			getBargainUser() {
				this.$http.get('bargain/getBargainUser', {
					spread_code: this.from.spread_code,
				}).then((res) => {
					if (res.data.code == 200) {
						var data = res.data.data
						this.from.bargain_user_id = data.uid;	//邀请人id
						this.id = data.bargain_id;	//邀请人砍价活动id
						this.bargain_id = data.id;	//邀请人砍价记录id
						this.getBargainDetail();
						this.bargainUserStatus();
						this.getHelpStatus();
					}
				})
			},
			getBargainHelpPeople() {
				this.$http.get('bargain/getBargainHelpPeople', {
					bargain_id: this.bargain_id,
					bargain_user_id: this.from.bargain_user_id,
					page: this.page,
					limit: this.limit,
				}).then((res) => {
					if (res.data.code == 200) {
						var data = res.data.data
						this.helpList.total = data.total;
						this.helpList.lastPage = data.last_page;
						for (let s of data.data) {
							this.helpList.data.push(s);
						}
						this.page++;
					}
				})
			},
			getHelpStatus() {
				this.$http.get('bargain/getHelpStatus', {
					bargain_id: this.bargain_id,
					bargain_user_id: this.from.bargain_user_id,
				}).then((res) => {
					console.log(res.data);
					this.helpStatus = res.data;
				})
			},
			toBargainRecode() {
				this.$http.get('bargain/bargainRecode', {
					id: this.id,
					bargain_user_id: this.from.bargain_user_id,
				}).then((res) => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.message,
							duration: 2000,
							icon: 'success'
						});
					}
					if(this.from.spread_code) {
						this.getBargainUser();
					}else {
						this.getBargainDetail();
						this.bargainUserStatus();
					}
				})
			},
			invitePeople() {
				let spread_code = this.spread_code;
				let html = document.getElementById("spread_code").innerHTML;
				console.log(html);
					this.$alert(html, '邀请好友来砍价', {
			          dangerouslyUseHTMLString: true,
					  showConfirmButton:false
			        });
			},
			toPay() {
				console.log(111);
				uni.navigateTo({
					url: "../Order/Order?order_type_code=4&num=1&skuIds=" + this.sku.id + "&totalPrice=" +
						this.bargainDetail.cutDownPrice + "&bargain_id=" + this.bargain_id
				})
			},
			toOtherBargain() {
				uni.navigateTo({
					url: "../Bargain/Bargain"
				})
			},
			format() {
				return this.percentage === 100 ? '满' : `${this.percentage}%`;
			},
			load() {
				if (this.helpList.lastPage > this.page) {
					this.getBargainHelpPeople();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'BargainRecode.scss';
</style>
